import { AppRouteRecordRaw } from '@/types'
import type { App } from 'vue'
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'

export const menus: AppRouteRecordRaw[] = [
  {
    path: 'home',
    name: 'Home',
    component: () => import('@/views/Home'),
    meta: {
      title: '首页',
      icon: 'home'
    }
  },
  // {
  //   path: 'button',
  //   name: 'Button',
  //   component: () => import('@/views/Button'),
  //   meta: {
  //     title: '按钮',
  //     icon: 'icon'
  //   }
  // },
  {
    path: 'icon',
    name: 'Icon',
    component: () => import('@/views/Icon'),
    meta: {
      title: '图标',
      icon: 'svg'
    }
  },
  {
    path: 'iconSelect',
    name: 'IconSelect',
    component: () => import('@/views/IconSelect'),
    meta: {
      title: '图标选择器',
      icon: 'icon'
    }
  },
  {
    path: 'dialogTable',
    name: 'DialogTable',
    component: () => import('@/views/DialogTable'),
    meta: {
      title: '弹出框表格',
      icon: 'icon'
    }
  },
  {
    path: 'sTable',
    name: 'STable',
    component: () => import('@/views/STable'),
    meta: {
      title: '结构树',
      icon: 'icon'
    }
  }
  // {
  //   path: 'areaSelect',
  //   name: 'AreaSelect',
  //   component: () => import('@/views/AreaSelect'),
  //   meta: {
  //     title: '城市选择器',
  //     icon: 'city'
  //   }
  // },
  // {
  //   path: 'tableSelect',
  //   name: 'TableSelect',
  //   component: () => import('@/views/TableSelect'),
  //   meta: {
  //     title: '表格选择器',
  //     icon: 'icon'
  //   }
  // },
  // {
  //   path: 'form',
  //   name: 'Form',
  //   component: () => import('@/views/Form'),
  //   meta: {
  //     title: '表单',
  //     icon: 'form'
  //   }
  // }
]

const routes: RouteRecordRaw[] = [
  {
    path: '/',
    component: () => import('@/views/Layout'),
    children: menus as RouteRecordRaw[]
  }
]

const router = createRouter({
  routes,
  history: createWebHashHistory()
})

export default function registerRouter(app: App) {
  app.use(router)
}
